/**
 * 登陆页面
 *@author：yanghx
 *@Date: 2020/2/14 20:17
 */
import React from 'react';
import {Text, View, StyleSheet} from 'react-native';
import {
  Button,
  Icon,
  InputItem,
  List,
  WhiteSpace,
  WingBlank,
} from '@ant-design/react-native';
// 现在PropTypes不在react中
import PropTypes from 'prop-types';
import {routeConfigMapName} from '@nav/NavConstant';
import NavigationUtil from '@nav/NavigationUtil';
import HttpUtil from '@util/HttpUtil';
import ApiEnum from '@api/ApiEnum';
import TokenUtil from '@util/TokenUtil';

export default class LoginPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      phone: null,
      password: null,
    };
  }

  static propTypes = {test: PropTypes.string};
  static navigationOptions = {
    title: '登陆',
  };
  /**
   * 跳转到页面
   */
  toPage = routerName => {
    const {navigation} = this.props;
    NavigationUtil.goPage(navigation, routerName, null);
  };

  /**
   * 登陆
   */
  onLoginSubmit = () => {
    const {phone, password} = this.state;
    if (!phone || !password) {
      alert('请填写手机号和密码');
      return;
    }


    if (this.state.phone === '123') {
      this.toPage(routeConfigMapName.Repair);
      return;
    }
    const params = this.state;
    params.phone = params.phone.split(' ').join('');
    HttpUtil.post(ApiEnum.login, params)
      .then(result => {
        if (result.code === 200) {
          TokenUtil.saveToken(result.data.token);
          //todo 保存token到 Storage
          alert(result.msg);
          setTimeout(() => {
            this.toPage(routeConfigMapName.Repair);
          }, 2000);
          return;
        }
        alert(result.msg);
      })
      .catch(e => {
        console.log('登陆失败', e);
        alert('登陆失败');
      });
  };

  render() {
    return (
      <>
        <View style={styles.login_title}>
          <Text style={styles.fontStyle}>登陆</Text>
        </View>
        <List style={styles.container}>
          <WingBlank>
            <InputItem
              clear
              type="phone"
              value={this.state.phone}
              onChange={value => {
                this.setState({
                  phone: value,
                });
              }}
              placeholder="请输入手机号">
              <Icon name={'mobile'}/>
            </InputItem>
            <InputItem
              clear
              value={this.state.password}
              onChange={value => {
                this.setState({
                  password: value,
                });
              }}
              placeholder="请输入密码">
              <Icon name={'lock'}/>
            </InputItem>
            <WhiteSpace size="xl"/>
            <Button
              styles={styles.submit_button}
              onPress={this.onLoginSubmit}
              type="primary">
              登陆
            </Button>

            <View
              style={{
                marginTop: 20,
                //todo 有条白线，后面想办法干掉他
                marginBottom: 1220,
                flexDirection: 'row',
                alignItems: 'center',
              }}>
              <Text>{'没有账户?  '}</Text>
              <Button
                type="ghost"
                size="small"
                onPress={() => this.toPage(routeConfigMapName.Register)}>
                去注册
              </Button>
            </View>
          </WingBlank>
        </List>
      </>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  login_title: {
    backgroundColor: '#ffffff',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  fontStyle: {
    fontSize: 50,
    color: '#398bff',
  },
  login_content: {
    flex: 2,
  },

  input_row: {
    flexDirection: 'row',
  },
  submit_button: {},
});
